<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>学园 - 个人中心 - 编辑资料</title>
    <link rel="stylesheet" type="text/css" href="../web_terminal/trunk/assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../web_terminal/trunk/assets/css/base.css">
    <link rel="stylesheet" type="text/css" href="../web_terminal/trunk/assets/css/layout.css">
    <link rel="stylesheet" type="text/css" href="../web_terminal/trunk/assets/css/mycenter.css">
</head>

<body>
    <div class="navigation">
        <div class="xywrap topinner">
            <a href="#" class="top-link-logo" id="top-link-logo">学园</a>
            <div class="topsearch">
                <form action="" class="top-search-form" method="post">
                    <input type="text" class="top-search-input" id="" name="" autocomplete="off" value="" placeholder="搜索感兴趣的话题" /><i class="icon-search iconfont">&#xe674;</i>
                </form>
            </div>
            <div class="navcontent" id="">
                <ul>
                    <li>
                        <a href="#" class="topnavx">首页</a>
                    </li>
                    <li><a href="#" class="topnavx">圈子</a></li>
                    <li><a href="#" class="topnavx">消息</a></li>
                </ul>
            </div>
            <div class="top-nav-selfinfo">
                <a href="#" class="top-nav-userinfo " id="" role="button">
                    <span class="name">Rose</span>
                    <img class="avatar">
                </a>
                <ul class="top-nav-dropdown" id="">
                    <li>
                        <a href="#" id="">个人主页</a>
                    </li>
                    <li>
                        <a href="#" id="">设置</a>
                    </li>
                    <li>
                        <a href="#" id="">退出</a>
                    </li>
                </ul>
            </div>
            <button id="" class="create-circle">发表</button>
        </div>
    </div>
    <div class="wrapper">
        <div class="main-content">
            <div class="main-content-inner">
                <div class="profile-edit-wrapper">
                    <div class="profile-edit-header clearfix">
                        <span>Gavin</span><span>&gt&gt编辑资料</span>
                        <a href="" class="profile-edit-backLink">返回个人主页</a>
                    </div>
                    <div class="profile-edit-content">
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>昵称</h3>
                            <div class="profile-edit-itemContent">
                                Gavin
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="text" id="nickname">
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="nickname">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>头像</h3>
                            <div class="profile-edit-itemAvatar profile-avatar">
                                <img src="" class="img-profile-avatar" id="avatar-update">
                            </div>
                            <input type="file">
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>性别</h3>
                            <div class="profile-edit-itemContent" id="gender">
                                男
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="radio" id="male" name="gender" value="1" style="margin-right: 5px">
                                    <label for="male">男</label>
                                    <input type="radio" id="female" name="gender" value="2" style="margin-left: 20px;margin-right: 5px">
                                    <label for="female">女</label>
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="gender">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>签名</h3>
                            <div class="profile-edit-itemContent">
                                这是一段默认的个性签名
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <textarea name="" cols="30" rows="5" id="signature"></textarea>
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="signature">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>学校</h3>
                            <div class="profile-edit-itemContent">
                                上海理工大学
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="text" id="school">
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="school">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>院系</h3>
                            <div class="profile-edit-itemContent">
                                能动学院
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="text" id="department">
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="department">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>班级</h3>
                            <div class="profile-edit-itemContent">
                                1101班
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="text" id="class">
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="class">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                        <div class="profile-edit-item bd-top clearfix">
                            <h3>名片</h3>
                            <div class="profile-edit-itemContent">
                                书记书记
                            </div>
                            <button class="profile-edit-btn">修改</button>
                            <div class="profile-edit-clickContent hidden">
                                <div class="profile-edit-inputWrapper">
                                    <input type="text" id="">
                                </div>
                                <div class="profile-edit-actionWrapper">
                                    <button class="save-btn button" data-tag="">保存</button>
                                    <button class="cancel-btn button">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="foot-content">
            <span class="companyname">上海久炽信息科技有限公司-技术支持</span>
        </div>
        <div id="msg-block"></div>
    </div>
    <script type="text/javascript" src="../web_terminal/trunk/assets/js/jquery-1.10.1.min.js"></script>
    <script>
    //点击tab切换子页面
    $(document).ready(function() {
        //点击修改按钮，隐藏对应的原界面和修改按钮，显示修改界面
        $('.profile-edit-btn').click(function() {
            $('.profile-edit-itemContent').eq($('.profile-edit-btn').index(this)).hide();
            $('.profile-edit-btn').eq($('.profile-edit-btn').index(this)).hide();
            $('.profile-edit-clickContent').eq($('.profile-edit-btn').index(this)).show();
        });
        //点击取消按钮，隐藏修改界面，显示原界面和修改按钮
        $('.cancel-btn').click(function() {
            $('.profile-edit-clickContent').eq($('.cancel-btn').index(this)).hide();
            $('.profile-edit-itemContent').eq($('.cancel-btn').index(this)).show();
            $('.profile-edit-btn').eq($('.cancel-btn').index(this)).show();
        });
        //点击保存，上传数据,如果成功，隐藏修改界面。保存数据并显示，
        $('.save-btn').click(function() {
            var tag = this.getAttribute("data-tag");
            if (tag == "gender") {
                var obj = document.getElementsByName(tag);
                for (var i = 0; i < obj.length; i++) {
                    if (obj[i].checked) {
                        var val = obj[i].value;
                        if (editPost(tag, val)) {
                            $('.profile-edit-clickContent').eq($('.save-btn').index(this)).hide(); //隐藏修改界面
                            $('.profile-edit-btn').eq($('.save-btn').index(this)).show(); //显示修改按钮
                            if (val == 1) {
                                $("#gender").text("男");
                                $('.profile-edit-itemContent').eq($('.save-btn').index(this)).show(); //显示修改界面
                            } else {
                                $("#gender").text("女");
                                $('.profile-edit-itemContent').eq($('.save-btn').index(this)).show(); //显示修改界面
                            }
                        }
                    }
                }
            } else {
                var obj = $("#" + tag);
                var objNew = $('.profile-edit-itemContent').eq($('.save-btn').index(this));
                var val = obj.val();
                if (editPost(tag, val)) {
                    obj.val("");
                    objNew.text(val);
                    $('.profile-edit-clickContent').eq($('.save-btn').index(this)).hide(); //隐藏修改界面
                    $('.profile-edit-btn').eq($('.save-btn').index(this)).show(); //显示修改按钮
                    $('.profile-edit-itemContent').eq($('.save-btn').index(this)).show(); //显示新界面
                }
            }
        });

        function editPost(attr, val) {
            $.ajax({
                type: 'post',
                url: '192.168.1.123/mycenter/editPost',
                data: {
                    Atrribute: attr,
                    Value: val,
                },
                datatype: 'json',
                success: function(data) {
                    if (data.StatusCode == 200) {
                        return true;
                    } else if (data.StatusCode == 300) {
                        $("#msg-block").text("修改失败!");
                        $.fancybox({
                            href: "#msg-block",
                        });
                        return false;
                    }
                }
            });
        }
    });
    </script>
</body>

</html>
